<template>
    <div class="material-index">
        <el-card class="!border-none" shadow="never">
            <el-tabs v-model="activeTab">
                <el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type"
                    :key="item.type" lazy>
                    <material :type="item.type" mode="page" file-size="120px" :limit="-1" :page-size="20" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="material">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const tabsMap = [
    {
        type: 'image',
        name: t('图片')
    },
    {
        type: 'video',
        name: t('视频')
    }
]
const activeTab = ref('image')
</script>

<style lang="scss" scoped>
.material-index {
    min-width: 700px;

    :deep(.el-tabs) {
        height: calc(100vh - 180px);
        display: flex;
        flex-direction: column;

        .el-tabs__header {
            margin-bottom: 0 !important;
        }

        .el-tabs__content,
        .el-tab-pane {
            min-height: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>
